<style scoped>
    @import '../assets/styles/common.css';
</style>
<template>
    <div class="layout-wrapper">
        <div class="layout-side" :class="{'layout-side-extend': !isCollapse}">
            <div class="layout-logo"></div>
            <el-menu :collapse="isCollapse" unique-opened router>
                <el-submenu :index="item.key" v-for="item in menus"  :key="item.key">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.desc }}</span>
                    </template>
                    <el-menu-item :index="sub.key" v-for="sub in item.subs" :key="sub.key">{{ sub.desc }}</el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
        <div class="layout-main">
            <div class="layout-header">
                <div class="i-button">
                    <i class="fa fa-sign-out" @click="logout"></i>
                </div>
                <div class="i-button">
                    <i class="fa fa-user"></i>
                </div>
                <div class="i-button">
                    <i class="fa fa-envelope"></i>
                </div>
                <div style="flex-grow: 1"></div>
                <div class="i-button">
                    <i class="fa fa-bars" @click="isCollapse = !isCollapse"></i>
                </div>
            </div>

            <div class="layout-body">
                <router-view></router-view>
            </div>

            <div class="layout-footer">
                Ant Design all rights reserved © 2015 Created by Ant UED
            </div>
        </div>
    </div>
</template>
<script>
    import menu from '../config/menu';
    export default {
        data() {
            return {
                isCollapse: false,
                menus: menu.menus
            }
        },
        methods: {
            logout() {
                this.$http.get('/api/account/users/logout/').finally(() => {
                    localStorage.removeItem('token');
                    this.$router.push({name: 'login'})
                })
            }
        },
        // created() {
        //     let token = localStorage.getItem('token');
        //     if (!token || token.length !== 32) {
        //         this.$router.push({name: 'login'})
        //     }
        // }
    }
</script>
